<template>
    <div class="page" ref="topDiv">
        <div class="left_div">
            <p class="left_div_title_bottom" v-bind:class="clicked1Class" @click="queryNotice('1')">通知公告</p>
            <p class="left_div_title_bottom" v-bind:class="clicked2Class" @click="queryNotice('2')">最新公文</p>
            <p class="left_div_title"  v-bind:class="clicked3Class" @click="queryNotice('3')">会议纪要</p>          
        </div> 
        <div class="right_div">
            <Tabs class="tabs_list" active-key="notice">
                <Tab-pane label="通知公告" key="notice">
                    <ul  class="articals" v-for = "(item,index) in articals">
                        <li class="artical">
                            <div class="articals_child">
                                <p class="articals_child_title">{{item.title}}</p>
                                <p class="articals_child_date">{{item.date}}</p>
                            </div> 
                        </li>
                    </ul>
                    <Page class="page_pos" :total="100" show-sizer show-total></Page>
                </Tab-pane>
            </Tabs>
        </div>
    </div>
</template>

<script>

import {Api} from '../../../api/index.js'

 
export default {
     data() {
         return {
             type1Clicked: true,
             type2Clicked: false,
             type3Clicked: false,
             articals:[]
        }
    },
    mounted(){
        this.$refs.topDiv.style.height = (window.innerHeight - 120) + 'px';
    },
    methods:{
        queryNotice(type){
            console.log(type);
           if(type == '1'){
               this.type1Clicked = true;
               this.type2Clicked = false;
               this.type3Clicked = false;
           }else if(type == '2'){
               this.type1Clicked = false;
               this.type2Clicked = true;
               this.type3Clicked = false;
           }else if(type == '3'){
               this.type1Clicked = false;
               this.type2Clicked = false;
               this.type3Clicked = true;
           }
        },
        formatDate(date, fmt) {
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            let o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                'h+': date.getHours(),
                'm+': date.getMinutes(),
                's+': date.getSeconds()
            };
            for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + '';
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                }
            }
            return fmt;
        },
        padLeftZero(str) {
            return ('00' + str).substr(str.length);
        },
    },
    computed:{
        clicked1Class:function(){
            return {
                type1ClickedClass : this.type1Clicked,
            }
        },
        clicked2Class:function(){
            return {
                type2ClickedClass : this.type2Clicked,
            }
        },
        clicked3Class:function(){
            return {
                type3ClickedClass : this.type3Clicked,
            }
        }
    }

}

</script>


<style scoped>

.page{
    background: #F3F3F7;
     min-width:1250px;
    height: 100%;
    overflow-y:auto;
    display:flex;
    align-items:flex-start;
    margin:auto;
}

.left_div{
    margin-top:20px;
    width: 250px;
    height: 180px;
    background: #FFFFFF;
}

.left_div_title_bottom{
    float: left;
    width: 250px;
    text-align: center;
    height: 60px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #464646;
    line-height: 60px;
    border-bottom: 1px solid #DBDBDB;
}

.left_div_title{
    float: left;
    width: 250px;
    height: 60px;
    text-align: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #464646;
    line-height: 60px;
}

.right_div{
    margin-top:20px;
    margin-left:42px;
    width:1040px;
    background: white;
}

.right_div>>> .ivu-tabs-nav .ivu-tabs-tab:active {
    color: black;
}

.right_div>>> .ivu-tabs-nav .ivu-tabs-tab:hover {
    color: black;
}

.right_div >>>.ivu-tabs-nav .ivu-tabs-tab-active {
    color: black;
}

.right_div>>> .ivu-tabs-ink-bar {
    height: 2px;
    box-sizing: border-box;
    background-color: red;
    position: absolute;
    left: 0;
    bottom: 1px;
    z-index: 1;
    transition: transform .3s ease-in-out;
    transform-origin: 0 0;
}

.right_div>>> .ivu-tabs-nav .ivu-tabs-tab {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 16px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: color .3s ease-in-out;

    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
    line-height: 40px;
}

.tabs_list{
    margin-left: 70px;
}

.articals{
    width: 100%;
    background: #FFFFFF;
}

.artical{
    margin-left: 15px;
    display: flex;
}


.artical:hover{
    color: 'red';
}

.articals_child{
    display: flex;
    justify-content: space-between;
}

.articals_child_title{
    width: 787px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    text-overflow:ellipsis;
    white-space:nowrap; 
    overflow:hidden;
}

.articals_child_date{
    width: 80px;
    margin-right:69px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #A3A3A3;
    line-height: 32px;
}

ul {
    list-style-type: none;
}

ul li:before{ 
    display: inline-block;
    content: "▶"; 
    padding-right: 10px;
    color: #FEA6A5;
    font-size:6px;

    line-height: 32px;
}


.page_pos{
    float:right;
    margin-bottom: 28px;
    margin-right:57px;
}

.type1ClickedClass{
    border-left:3px solid red;
    color: red;
}

.type2ClickedClass{
    border-left:3px solid red;
    color: red;
}

.type3ClickedClass{
    border-left:3px solid red;
    color: red;
}
</style>
